<template lang='pug'>
  .pos-r.mt-20
    //- CheckboxGroup(v-model="capitationValue" @on-change="capitationValueChange")
    template(v-for="(item,index) in capitationArr")
      Divider.mt-5.mb-5
      //- Checkbox.d-f-c.mt-10(:label="item.category")
      .d-f-c.ml-10
        .capitation-li
          Checkbox(v-model="item.enable" @on-change="enableChange(index)") 启用
          span {{item.name}}：
          Input.input-has-border(v-model="item.amount" type="number" style="width:100px;" :disabled="!item.enable")
          span  元/人/月，
        .capitation-li
          span 收费规则：
          RadioGroup(v-model="item.charge")
            Radio(label="1" border :disabled="!item.enable") 当月新增当月收费
            Radio(label="5" border :disabled="!item.enable") 当月新增次月收费
            Radio(label="2" border :disabled="!item.enable")
              span 预收：
              Input.input-has-border(v-model="item.advanceMonths" type="number" style="width:100px" :disabled="!item.enable")
              span 个月（
              .early-collection 是否提前收取：
                i-switch(v-model="item.isAhead" :disabled="!item.enable")
                  span(slot="open") 是
                  span(slot="close") 否
              span ）
    Divider.mt-5.mb-0
    Checkbox.d-f-c.mt-10(v-model="discardLast")
      .ml-10 收头不收尾
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'
export default {
  name:'',
  props:{
    fuwufeiModel1: Boolean,
    commonDate: Object,
    rateDetails: Array,
    value: Number,
    SFFirst: Boolean
  },
  data () {
    return {
      posDetails: [],
      // 服务费按人头收费
      capitationValue: [],
      discardLast: false,
      capitationArr: [
        {enable: false, category : '16', name: '基础服务费', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: false, category: '17', name: '社保服务费', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: false, category: '18', name: '公积金服务费', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: false, category: '20', name: '商保服务费', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: false, category: '24', name: '薪资服务费', amount: 0, charge: '1', advanceMonths: 0, isAhead: true}
      ],
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 启用改变时
    enableChange (index) {
      let flag = this.capitationArr[index].enable
      console.log(flag)
      if (flag) {

      } else {
        this.capitationArr.splice(index,1,this.getCapitation(index))
      }
    },
    getCapitation (index) {
      let obj = {}
      switch (index) {
        case 0:
          obj = {enable: false, category : '16', name: '基础服务费', amount: 0, charge: '1', advanceMonths: 0, isAhead: true}
          break;
        case 1:
          obj = {enable: false, category: '17', name: '社保服务费', amount: 0, charge: '1', advanceMonths: 0, isAhead: true}
          break;
        case 2:
          obj = {enable: false, category: '18', name: '公积金服务费', amount: 0, charge: '1', advanceMonths: 0, isAhead: true}
          break;
        case 3:
          obj = {enable: false, category: '20', name: '商保服务费', amount: 0, charge: '1', advanceMonths: 0, isAhead: true}
          break;
        case 4:
          obj = {enable: false, category: '24', name: '薪资服务费', amount: 0, charge: '1', advanceMonths: 0, isAhead: true}
          break;
      }
      return obj
    },
    submit () {
      if (this.fuwufeiModel1) {
        // this.posDetails = this.capitationArr.filter(item => {
        //   return item.enable
        // })
        this.posDetails = this.capitationArr
      } else {
        this.posDetails = []
      }
      this.postByTypeSFProject()
    },
    postByTypeSFProject () {
      InsureProjectApi.PostByTypeSFProject({
        Name: this.commonDate.name,
        Type: this.value,
        FollowInsure: this.commonDate.hasInsure,
        DiscardLast: this.discardLast,
        Details: this.posDetails,
        RateDetails: this.rateDetails,
        SFFirst: this.SFFirst
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
          this.refreshData()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
    }
  },

  watch: {
  }

}

</script>
<style lang='less' scoped>
  .card{
    display: block;
    border: 1px solid #dcdee2;
    padding: 16px;
    border-radius: 4px;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
  .pos-r{
    position: relative;
  }
  .has-line{
    position: relative;
    &:before{
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: #eee;
      position: absolute;
      top: 12px;
      left: 0;
    }
    span{
      display: inline-block;
      background: #fff;
      padding: 0 5px 0 18px;
      position: relative;
      margin-left: 30px;
      font-size: 14px;
      color: red;
    }
    button{
      position: relative;
    }
  }
  .early-collection{
    display: inline-block;
  }
  .ratio-item{
    margin-top: 10px;
    span{
      display: inline-block;
      width: 60px;
    }
  }
</style>